<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color: #ff8500;
            transition:transform 2s;

            margin:200px auto;
        }
        .box:hover{
            /*当旋转时坐标系也会跟着旋转*/

            /*transform:translateX(600px) rotate(360deg) scale(0);*/

            /*注意书写顺序，当旋转时，坐标系会发生变化，平移时按照旋转的坐标系平移*/
            transform:rotate(360deg) translateX(600px)  scale(0);
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>